<template>
  <el-container class="main_con">
   <ufrom @submit="saveData" :hidden="!isEdit" ref="ufrom">

      <el-form ref="formRules" size="small" :model="myform" label-width="100px" class="form_box" :rules="formRules">
        <div class="setting_body_item">
          <div class="header">基本信息</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="活动名称" prop="name"><el-input :disabled="isEdit" v-model="myform.name" size="small" style="width:350px"></el-input></el-form-item>
              <el-form-item label="活动期限" prop="times" v-if="!isEdit">
                <el-date-picker
                  size="small"
                  style="width:350px"
                  v-model="myform.times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="活动期限" v-else>
                <el-date-picker size="small" disabled v-model="myform.start_time" type="datetime" placeholder="开始日期" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                <span style="margin: 0 10px;">至</span>
                <el-date-picker disabled size="small" v-model="myform.end_time" type="datetime" placeholder="结束日期" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">规则设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="参与等级">
                <el-radio-group v-model="myform.level_type" :disabled="isEdit">
                  <el-radio :label="0">全部分销商</el-radio>
                  <el-radio :label="1">指定分销商等级</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :disabled="isEdit" prop="levels" label="分销商等级" v-if="myform.level_type == 1">
                <el-select clearable v-model="myform.levels" multiple placeholder="请选择">
                  <el-option v-for="item in gradelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="考核依据">
                <el-checkbox :disabled="isEdit" v-model="myform.condition.order_money" :true-label="1" :false-label="0">分销订单总额</el-checkbox>
                <el-checkbox :disabled="isEdit" v-model="myform.condition.order_count" :true-label="1" :false-label="0">分销订单总数</el-checkbox>
                <el-checkbox :disabled="isEdit" v-model="myform.condition.child_agent_count" :true-label="1" :false-label="0">下线分销商</el-checkbox>
                <el-checkbox :disabled="isEdit" v-model="myform.condition.child_count" :true-label="1" :false-label="0">下线人数</el-checkbox>
                <el-alert title="需要满足选择的全部条件才能获得奖励" type="info" :center="false" show-icon :closable="false"></el-alert>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">奖励设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
        <!--      <el-collapse v-model="activeNames">
                <el-collapse-item name="1" v-for="(item, i) in stagenum"> -->
              <el-tabs type="card" v-model="TabsValue" @tab-remove="removestagenum">
                <el-tab-pane :closable="i > 0" :key="i" v-for="(item, i) in stagenum" :label="stagelist[i].name" :name="i + ''">

                <!--  <template slot="title">
                    <div>
                      <i class="el-icon-error u-m-r-20" v-if="i > 0" @click.stop="stagenum--"></i>
                      <span>{{ stagelist[i].name }}</span>
                    </div>
                  </template> -->
                  <el-form-item label="奖励条件">
                    <div class="box">
                      <el-form-item label="分销订单总额" v-if="myform.condition.order_money">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].condition.order_money" style="width:200px"></el-input>
                      </el-form-item>
                      <el-form-item label="分销订单总数" v-if="myform.condition.order_count">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].condition.order_count" style="width:200px"></el-input>
                      </el-form-item>
                      <el-form-item label="下线分销商" v-if="myform.condition.child_agent_count">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].condition.child_agent_count" style="width:200px"></el-input>
                      </el-form-item>
                      <el-form-item label="下线人数" v-if="myform.condition.child_count">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].condition.child_count" style="width:200px"></el-input>
                      </el-form-item>
                    </div>
                  </el-form-item>
                  <el-form-item label="奖励内容">
                    <el-checkbox-group :disabled="isEdit" v-model="stagelist[i].awardlist">
                      <el-checkbox v-if="is_coupon" label="coupon">优惠券</el-checkbox>
                      <el-checkbox v-if="is_deduction" label="integral">积分</el-checkbox>
                      <el-checkbox label="balance">余额</el-checkbox>
                      <el-checkbox label="upgrade">升级</el-checkbox>
                      <el-checkbox label="customize">自定义奖励</el-checkbox>
                    </el-checkbox-group>

                    <div class="box">
                      <el-form-item v-if="stagelist[i].awardlist.indexOf('coupon') > -1" label="优惠券">
                        <el-button :disabled="isEdit" @click="selectConpon(i)">添加优惠卷（{{ stagelist[i].couponlist.length }}/3）</el-button>
                        <el-table class="mt_15" :data="stagelist[i].couponlist">
                          <el-table-column label="优惠券名称" prop="name"></el-table-column>
                          <el-table-column prop="conditions" label="满" width="180"></el-table-column>
                          <el-table-column prop="denomination" label="减" width="180"></el-table-column>
                          <!-- <el-table-column prop="total_limit" label="库存"></el-table-column> -->
                          <el-table-column label="操作">
                            <template slot-scope="scope">
                              <el-button :disabled="isEdit" type="text" @click="deleteData(scope.row.id)">删除</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-form-item>
                      <el-form-item v-if="stagelist[i].awardlist.indexOf('integral') > -1" label="积分">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].award.integral" style="width: 300px;"></el-input>
                      </el-form-item>
                      <el-form-item v-if="stagelist[i].awardlist.indexOf('balance') > -1" label="余额">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].award.balance" style="width: 300px;"></el-input>
                      </el-form-item>
                      <el-form-item v-if="stagelist[i].awardlist.indexOf('upgrade') > -1" label="升级">自动升级为下一等级</el-form-item>
                      <el-form-item v-if="stagelist[i].awardlist.indexOf('customize') > -1" label="自定义奖励">
                        <el-input :disabled="isEdit" v-model="myform.award_stage[stagelist[i].key].award.customize" style="width: 300px;"></el-input>
                      </el-form-item>
                    </div>
                  </el-form-item>
         </el-tab-pane>
         </el-tabs>
              <div class="btns_div"><el-button @click="addstagenum" :disabled="isEdit">添加奖励规则</el-button></div>
            </div>
          </div>
        </div>
        <div class="setting_body_item">
          <div class="header">页面设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="活动封面">
                <div style="width:100px;height:100px;">
                  <Upload v-if="!isEdit" :tempUrl="myform.thumb" @input="getImage"></Upload>
                  <vimage v-else :src="myform.thumb"></vimage>
                </div>
              </el-form-item>
              <el-form-item label="活动规则">
                <tinymce v-if="!isEdit" v-model="myform.content" :height="400" />
                <div v-else v-html="myform.content"></div>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
       </ufrom>

    <el-dialog title="选择优惠券" :visible.sync="showSelectCon" width="50%" append-to-body destroy-on-close>
      <SelectConpon ref="SelectConpon" :limit="3" :key="rk" :data="selectCon" @outData="closePro"></SelectConpon>
    </el-dialog>
  </el-container>
</template>

<script>
import SelectConpon from '@/components/SelectConpon/index';
import Upload from '@/components/Upload/SingleImage2';
import Tinymce from '@/components/Tinymce';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';
import {agent_gradelist} from '@/api/mall/agent';
import {addactivity, getdetail} from '@/api/mall/commission';

export default {
  data() {
    var checkNum1 = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error('人数不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value <= this.myform.laddernum[0].num) {
            callback(new Error('要大于上一阶梯人数'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkNum2 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('人数不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value <= this.myform.laddernum[1].num || value <= this.myform.laddernum[0].num) {
            callback(new Error('要大于上一阶梯人数'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      rk: 0,
      prize_index: '0',
      prize_time: '',
      id: '',
      Prolist: [],

      source: [],
      myform: {
        name: '', //	必传	string	名称
        start_time: '', //	必传	string	开始时间
        end_time: '', //	必传	string	结束时间
        level_type: 0, //	必传	int	0=全部分销商 1=指定分销商等级
        levels: [], //	必传	string	等级id组 例如
        condition: {
          order_money: 0,
          order_count: 0,
          child_agent_count: 0,
          child_count: 0
        }, //	必传	string	条件
        thumb: '', //	必传	string	封面
        content: '', //	必传	string	规则
        award_stage: {
          first: {
            condition: {
              order_money: 0,
              order_count: 0,
              child_agent_count: 0,
              child_count: 0
            },
            award: {
              coupon: [],
              balance: 0,
              integral: 0,
              upgrade: 1,
              customize: ''
            }
          },
          second: {
            condition: {
              order_money: 0,
              order_count: 0,
              child_agent_count: 0,
              child_count: 0
            },
            award: {
              coupon: [],
              balance: 0,
              integral: 0,
              upgrade: 1,
              customize: ''
            }
          },
          third: {
            condition: {
              order_money: 0,
              order_count: 0,
              child_agent_count: 0,
              child_count: 0
            },
            award: {
              coupon: [],
              balance: 0,
              integral: 0,
              upgrade: 1,
              customize: ''
            }
          }
        }, //
        times: ''
      },
      form: {
        title: '', //,	必填	string	名字
        start_time: '', //,	必填	date	开始时间
        end_time: '', //,	必填	date	结束时间
        type: 1, //,	必填	int	1普通拼团2阶梯拼团
        client_type: '', //,	多选	string	来源（逗号分隔）1微信公众号2小程序3h5
        rules: {
          success_num: [0, 0], //,	必填	string	0成团人数 {1,2,3…}阶梯团
          limit_time: '', //,	必填	int	0拼团有效期
          use_virtual_success: [0, 0], //,	必填	string	{0, num}模拟成团{1是，人数}
          use_agent: 0, //,	必填	int	0分销
          use_coupon: 0, //,	必填	int	0优惠券
          limit_type: [0, 0, 0], //,必填	string	{0,0,0}限购次数 {选项，活动期内每人最多购买, 活动期内每人每天最多购买}
          use_single: 1, //,	必填	int	1商品单购
          is_show: 0 //,
        } //,	必填	string	规则设置
      },
      formRules: {
        name: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ],
        times: [
          {
            required: true,
            message: '请选择活动时间',
            trigger: 'change'
          }
        ],
        levels: [
          {
            required: true,
            message: '请至少选择一个分销商等级',
            trigger: 'change'
          }
        ],
        success_num: [
          {
            required: true,
            message: '请输入成团人数',
            trigger: 'blur'
          },
          {type: 'number', min: 2, max: 100, message: '人数在2至100之间', trigger: 'blur'}
        ],
        limit_time: [
          {
            required: true,
            message: '请选择有效期',
            trigger: 'blur'
          },
          {type: 'number', min: 1, message: '有效期最少为1分钟', trigger: 'blur'}
        ],
        is_show_time: [
          {
            required: true,
            message: '请选择预热时间',
            trigger: 'blur'
          }
        ],
        'laddernum.0.num': [
          {
            required: true,
            message: '人数不能为空',
            trigger: 'blur'
          },
          {type: 'number', min: 2, message: '至少2人', trigger: 'blur'}
        ],
        'laddernum.1.num': [{validator: checkNum1, trigger: 'blur'}],
        'laddernum.2.num': [{validator: checkNum2, trigger: 'blur'}],
        use_virtual_success: [
          {
            required: true,
            message: '请输入虚拟人数',
            trigger: 'blur'
          },
          {type: 'number', min: 1, max: 100, message: '人数在1至100之间', trigger: 'blur'}
        ]
      },

      isEdit: false,
      activeNames: ['1'],
      is_coupon: false,
      is_deduction: false,
      selectPro: [],
      stagelist: [
        {
          name: '一阶达标奖励',
          key: 'first',
          awardlist: [],
          couponlist: []
        },

        {
          name: '二阶达标奖励',
          key: 'second',
          awardlist: [],
          couponlist: []
        },
        {
          name: '三阶达标奖励',
          key: 'third',
          awardlist: [],
          couponlist: []
        }
      ],
      stagenum: 1,
      gradelist: [],
      showSelectCon: false,
      selectCon: [],
      TabsValue:''
    };
  },
  created() {
    jur_addons([7, 3]).then(res => {
      if (res[3]) {
        this.is_coupon = true;
      }

      if (res[7]) {
        this.is_deduction = true;
      }
    });
    this.agent_gradelist();
    if (this.$route.query.id) {
      //编辑状态
      this.isEdit = true;
      this.id = this.$route.query.id;
      this.getdetail();
    }
  },

  components: {
    SelectConpon,
    Upload,
    Tinymce
  },
  methods: {
    removestagenum(i) {
      if (i == this.TabsValue) {
        this.TabsValue = this.TabsValue - 1 + '';
      }
      this.stagenum--
    },
    agent_gradelist() {
      let data = {
        page: 1,
        size: 10
      };
      agent_gradelist(data).then(res => {
        let list = res.msg;
        list.unshift({id: 0, name: '默认等级'});
        this.gradelist = list;
      });
    },
    //获取主图
    getImage(val) {
      this.myform.thumb = val;
    },
    addstagenum() {
      if (this.stagenum < 3) {
        this.stagenum++;
      }
    },
    getdetail() {
      let data = {
        id: this.id
      };
      getdetail(data).then(res => {
        let json = res.msg;
        this.myform.name = json.name;
        this.myform.level_type = json.level_type;
        this.myform.levels = JSON.parse(json.levels);
        this.myform.start_time = json.start_time;
        this.myform.end_time = json.end_time;
        this.myform.thumb = json.thumb;
        this.myform.content = json.content;
        this.myform.condition = JSON.parse(json.condition);
        this.myform.award_stage = JSON.parse(json.award_stage);
        if (this.myform.award_stage.first) {
          this.stagenum = 1;
        }
        if (this.myform.award_stage.second) {
          this.stagenum = 2;
        }
        if (this.myform.award_stage.third) {
          this.stagenum = 3;
        }
        let award = this.myform.award_stage.first.award;
        let awardlist = [];
        for (let key in award) {
          awardlist.push(key);
        }
        this.stagelist.forEach(a => {
          a.awardlist = awardlist;
        });
      });
    },
    deleteData(i) {
      this.Prolist.splice(i, 1);
      this.selectPro.splice(i, 1);
    },
    editsave() {
      let data = {
        is_show: [this.myform.is_show, this.myform.is_show_time],
        end_time: this.myform.end_time,
        id: this.id
      };
      editgroup(data).then(res => {
        this.$router.push({
          path: '/groupon/list'
        });
      });
    },

    saveData() {
      let _this = this;
      this.$refs['formRules'].validate(valid => {
        if (valid) {
            _this.save();
        } else {
          this.$refs.ufrom.init();
        }
      });
    },
    save() {
      let obj = {
        name: this.myform.name,
        start_time: this.myform.times[0], 
        end_time: this.myform.times[1],
        level_type: this.myform.level_type,
        levels: JSON.stringify(this.myform.levels),
        condition: JSON.stringify(this.myform.condition),
        thumb: this.myform.thumb,
        content: this.myform.content
      };
      let award_stage = {};
      for (var i = 0; i < this.stagenum; i++) {
        let key = this.stagelist[i].key;
        let awardlist = this.stagelist[i].awardlist;
        award_stage[key] = {
          condition: {},
          award: {}
        };
        for (let name in this.myform.condition) {
          if (this.myform.condition[name]) {
            award_stage[key].condition[name] = this.myform.award_stage[key].condition[name];
          }
        }
        awardlist.forEach(a => {
          award_stage[key].award[a] = this.myform.award_stage[key].award[a];
        });
      }
      obj.award_stage = JSON.stringify(award_stage);
      addactivity(obj).then(res => {
      this.$refs.ufrom.init();
        this.$router.push({
          path: '/activitys/list'
        });
      }).catch(e=>{
         this.$refs.ufrom.init();
      });
    },
    selectConpon(i) {
      this.index = i;
      this.selectCon = this.stagelist[i].couponlist;
      this.showSelectCon = true;
      this.$nextTick(() => {
        this.$refs.SelectConpon.init();
      });
    },
    //关闭选择产品框
    closePro(list) {
      console.log(list);
      if (list) {
        this.stagelist[this.index].couponlist = list;
        let key = this.stagelist[this.index].key;
        this.myform.award_stage[key].award.coupon = [];
        list.forEach(a => {
          this.myform.award_stage[key].award.coupon.push(a.id);
        });
      }

      this.showSelectCon = false;
    },
    getskuData(list, i) {
      this.showSelectSku = false;
      if (list) {
        this.Prolist[i].sku = list;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.main_con {
  height: 100%;
  .gift_body {
    background-color: #ffffff;
    padding: 20px 30px;
    // display: flex;
    // height: 100%;
    .box {
      margin-top: 10px;
      background-color: #f4f6f8;
      border-radius: 2px;
      font-size: 14px;
      line-height: 20px;
      color: #262b30;
      padding: 20px;
    }
    .right {
      flex: 1;
      margin-left: 30px;
      padding: 20px;
      border-radius: 15px;
      box-sizing: border-box;
      box-shadow: 0px 5px 10px #e8e8e8;
      overflow: auto;
      height: 100%;
      .form_box {
        /deep/.el-tabs--left .el-tabs__header.is-left {
          height: 67vh;
        }
        .prize_img {
          width: 120px;
          height: 120px;
        }
        .block {
          width: 400px;
        }
        .box_ove {
          height: 68vh;
          overflow: auto;
        }
      }
      .form_button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        .el-button {
          width: 200px;
        }
      }
    }
    .left {
      .app_div {
        width: 410px;
        height: 785px;
        padding: 62px 28px 90px 27px;
        position: relative;
        background: url('~@/assets/images/ipbg.png') no-repeat;
        background-size: 100%;
        overflow: hidden;
        .app_main {
          overflow: scroll;
          height: 100%;
          z-index: 2;
          position: relative;
          background: #fff;
          &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
        }
        .div_bg {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .phone-title {
            height: 64px;
            background: #fff;
            background-size: 100% auto;
            text-align: center;
            cursor: pointer;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
            width: 100%;
            &.pageInfo {
              box-shadow: 0 0 2px 0 #2d8cf0;
              z-index: 1000;
              position: relative;
            }
            .page-title {
              position: absolute;
              z-index: 100;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: 600;
              font-size: 18px;
              line-height: 25px;
              display: flex;
              align-items: center;
              text-align: center;
              color: #212121;
              left: 50%;
              transform: translate(-50%, 0);
              bottom: 10px;
              margin: 0;
            }

            .phone-top {
              display: flex;
              flex-direction: column;
              width: 100%;
              overflow: hidden;

              .custom-navbar img {
                position: absolute;
                right: 7px;
                width: 87px;
                height: 32px;
                bottom: 6px;
              }
            }
          }
          .bg_img {
            width: 100%;
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .div_content {
          width: 100%;
          // height: 100%;
          position: relative;
          z-index: 2;
          .content_box {
            width: 290px;
            // margin-top: 300px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
            .content_bg {
              width: 100%;
              height: 280px;
              background-image: linear-gradient(#ff9c6b, #ff5c4a);
              border-radius: 15px;
              box-sizing: border-box;
              padding: 10px 11px 38px;
              box-shadow: 0px 3px 0px #d72b27 inset;
              border-left: solid 2px rgba(255, 255, 255, 0.4);
              border-right: solid 2px rgba(255, 255, 255, 0.4);
              .content_txt {
                font-size: 12px;
                text-align: center;
                color: #fff;
              }
              .content_bg1 {
                width: 100%;
                height: 100%;
                background: #ff4631;
                border-radius: 15px;
                box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 5px;
                padding: 10px;
                .content_bg2 {
                  width: 100%;
                  height: 100%;
                  background: #d62e1e;
                  border-radius: 15px;
                  box-shadow: #d02a1b 0px -3px 5px;
                  .lottery-box {
                    overflow: hidden;
                  }
                  .lottery {
                    width: 100%;
                    height: 100%;
                  }
                  .lottery .lottery-item {
                    height: 100%;
                    position: relative;
                  }

                  .lottery .lottery-item ul li {
                    width: 30%;
                    height: 30%;
                    position: absolute;
                    margin: 5px;
                    list-style-type: none;
                  }

                  .lottery .lottery-item ul li:nth-child(2) {
                    left: 33%;
                  }

                  .lottery .lottery-item ul li:nth-child(3) {
                    left: 66%;
                  }

                  .lottery .lottery-item ul li:nth-child(4) {
                    left: 66%;
                    top: 32%;
                  }

                  .lottery .lottery-item ul li:nth-child(5) {
                    left: 66%;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(6) {
                    left: 33%;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(7) {
                    left: 0;
                    top: 64%;
                  }

                  .lottery .lottery-item ul li:nth-child(8) {
                    left: 0;
                    top: 32%;
                  }

                  .lottery .lottery-item ul li .box {
                    height: 100%;
                    position: relative;
                    text-align: center;
                    background-color: #fff;
                    box-shadow: 0px -7px 0px #ffcacb inset;
                    border-radius: 12px;
                    overflow: hidden;
                    margin: 0;
                    padding: 5px;
                    p {
                      font-size: 12px;
                      margin-top: 4px;
                      text-align: center;
                      line-height: 10px;
                    }
                  }

                  .lottery .lottery-item ul li .box img {
                    display: block;
                    height: 30px;
                    margin: 0 auto;
                  }

                  .lottery .lottery-item ul li.on .box {
                    border: #ffb000 solid 2px;
                    border-bottom: none;
                    box-shadow: 0px -7px 0px #ffb000 inset;
                  }

                  .lottery .lottery-item .lottery-start {
                    position: absolute;
                    width: 30%;
                    height: 30%;
                    margin: 5px;
                    left: 48%;
                    top: 48%;
                    transform: translate(-50%, -50%);
                    img {
                      width: 100%;
                      display: block;
                    }
                  }
                }
              }
            }
            .bg_box {
              width: 72%;
              margin: auto;
              height: 30px;
              background: #f9604f;
              border: #fa5542 solid 3px;
              display: block;
              position: relative;
              top: -28px;
              z-index: -1;
              font-size: 30px;
              border-radius: 5px;
              transform: perspective(0.6em) rotateX(20deg);
            }
            .bg_imgr {
              position: absolute;
              z-index: 9;
              width: 100%;
              bottom: 0px;
            }
          }
        }
      }
    }
  }
}
.product-item {
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
.aaa {
  position: relative;
  height: 1px;
}
.setting_body_item {
  .header {
    background: #e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }
  .btns_div {
    margin: 20px 0;
    text-align: center;
  }
}

.setting_bootom {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #dcdfe6;
}
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.tips {
  color: #939799;
  margin: 10px 0;
  font-size: 12px;
}
.ladder_num {
  width: 350px;
  border: 1px solid #e9edef;

  .name {
    width: 100px;
  }
  .num {
    width: 180px;
  }
  .btns_div {
    width: 70px;
  }
  .ladder_num_header,
  .content_item {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .ladder_num_header {
    background: #f4f6f8;
    font-weight: bold;
  }
  .content_item {
    border-top: 1px solid #e9edef;
    justify-content: center;
    .num {
      display: flex;
      align-items: center;
      padding: 20px 0 0 0;
    }
  }
}
.el-icon-error{
  font-size: 24px;
}
</style>
